<template>
  <ProTable
    ref="tableRef"
    :fetchListApi="_getWxMessageList"
    :columns="columns"
    hide-search
    hidePagination
    row-key="id"
  >
    <template #enable="{ record }">
      <Switch
        :checked="record.enable"
        :loading="record.switchLoad"
        checked-value="1"
        un-checked-value="0"
        @change="(checked) => onChangeStatus(checked as string, record)"
        :disabled="!hasPermission('wxmessage:enable')"
      ></Switch>
    </template>
    <template #operation="{ record }">
      <b-button
        icon="edit"
        type="link"
        @click="onView(record)"
        code="messagePush:query"
        >详情</b-button
      >
      <b-button
        icon="monitor"
        type="link"
        @click="onTest(record)"
        code="messagePush:test"
        >测试</b-button
      >
    </template>
  </ProTable>
  <FormModal :items="items"> </FormModal>
</template>

<script setup lang="tsx">
import { computed, ref } from 'vue';
import { hasPermission } from '@/permission';
import { Input, Modal, Switch, message } from 'ant-design-vue';
import { ProFormProps } from '@/components/ProForm';
import { ProTable, ProTableProps } from '@/components/ProTable/index';
import { useFormModal } from '@/hooks/formModal';
import { TestWxMessage, getWxMessageList, putWxMessage } from '@/api/config';

const tableRef = ref();
const typeEnum = {
  '1': '设备监控消息',
  '2': '速报消息',
};
const _getWxMessageList = async (params: any) => {
  const res = await getWxMessageList();
  return { rows: [res.data] };
};

const columns = computed<ProTableProps['columns']>(() => [
  {
    title: '类型',
    dataIndex: 'type',
    valueEnum: typeEnum,
  },
  {
    title: 'appToken',
    dataIndex: 'appToken',
  },
  {
    title: '主题ID',
    dataIndex: 'topicId',
    hideInSearch: true,
  },
  {
    title: '平台名称',
    dataIndex: 'platformName',
    hideInSearch: true,
  },
  {
    title: '是否启用',
    dataIndex: 'enable',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    hideInSearch: true,
    fixed: 'right',
    width: 150,
  },
]);

const items = computed<ProFormProps['items']>(() => [
  {
    label: '类型',
    type: 'input',
    field: 'type',
    disabled: true,
    customRender(formState) {
      return (
        <Input
          value={typeEnum[formState.type as keyof typeof typeEnum]}
          disabled
        />
      );
    },
  },
  {
    label: 'APP Token',
    type: 'input',
    field: 'appToken',

    rules: [
      {
        required: true,
        message: '请输入APP Token',
        trigger: 'blur',
      },
    ],
    props: {
      placeholder: '请输入APP Token',
    },
  },
  {
    label: '主题ID',
    type: 'input',
    field: 'topicId',
    rules: [
      {
        required: true,
        message: '请输入主题ID',
        trigger: 'blur',
      },
    ],
    props: {
      placeholder: '请输入主题ID',
    },
  },
  {
    label: '平台名称',
    type: 'input',
    field: 'platformName',
    rules: [
      {
        required: true,
        message: '请输入平台名称',
        trigger: 'blur',
      },
    ],
    props: {
      placeholder: '请输入平台名称',
    },
  },
]);
const { FormModal, open } = useFormModal({
  size: 'small',
  column: 1,
  formProps: { labelCol: { span: 3 } },
});

const sleep = (cb) => {
  setTimeout(() => {
    cb();
  }, 500);
};

const onChangeStatus = (checked: any, row: any) => {
  console.log(checked, row);
  row.switchLoad = true;
  row.enable = checked;
  Modal.confirm({
    title: '系统提示',
    centered: true,
    content: row.enable == '1' ? '是否启用？' : '是否断开？',
    onOk: async () => {
      await putWxMessage(row);
      sleep(() => tableRef.value.refresh());
      message.success('操作成功');
    },
  });
};

const onView = (record: any) => {
  open({
    title: (type) => (type === 'info' ? '详情' : '编辑'),
    modalType: 'info',
    defaultValue: { ...record },
    serviceApi: async (params: any): Promise<any> => {
      await putWxMessage(params);
      tableRef.value.refresh();
    },
    hasEditPermission: hasPermission('wxmessage:edit'),
  });
};
const onTest = async (record: any) => {
  Modal.confirm({
    title: '系统提示',
    centered: true,
    content: `确认测试当前项？`,
    onOk: async () => {
      await TestWxMessage();
      message.success('测试发送成功');
    },
  });
};
</script>
